<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>画一个渐变的图片</title>
</head>
<!--<body>
    <canvas id="mycanvas" width="200" height="100"
    style="border: 1px solid darkgrey">
    </canvas>

    <script type="text/javascript">
        var c = document.getElementById("myCanvas");
        var cxt = c.getContext("2d");
        var grd = cxt.createLinearGradient(0,0,175,50);
        grd.addColorStop(0,"#ffffff");
        grd.addColorStop(1,"#00FF00");
        cxt.fillStyle=grd;
        cxt.fillRect(0,0,175,50);
    </script>
</body>-->

<body>

<canvas id="myCanvas" width="200" height="100"
        style="border: 1px solid darkgrey">
</canvas>


<script type="text/javascript">
    var c = document.getElementById("myCanvas");
    var cxt = c.getContext("2d");
    var grd = cxt.createLinearGradient(0,0,175,50);
    grd.addColorStop(0,"#ffffff");
    grd.addColorStop(1,"#00FF00");
    cxt.fillStyle=grd;
    cxt.fillRect(0,0,175,50);
</script>

</body>
</html>